<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与input元素</title>
</head>
<body>
<article>
    <aside>
        <h1>关于表单</h1>
        <p>表单是网页中的重要元素，用于收集客户端的信息然后传递给服务器进行处理</p>
        <p>一个完整的表单由：表单域，表单元素，提示信息组成</p>
        <p>表单域：用于存放所有表单元素和提示信息的容器，表单元素必须放在表单域中，才能将数据提交到服务器</p>
        <p>表单元素：包含具体的表单功能项，如文本输入框，密码输入框，单选钮，复选框，提示按钮，重置按钮等</p>
        <p>提示信息：表单中用于说明性的文字，用于提示用户填写和操作</p>
        <h1>关于表单属性</h1>
        <ul>
            <li>
                action：指明了接受表单数据的服务器程序的URL地址
            </li>
            <li>
                method：设置表单的提交方式，有get(默认值)和posh，如果使用get则保密性差且有数据量的限制；使用push保密性高且没有数据量限制
            </li>
            <li>
                name：定义表单的名称
            </li>
            <li>
                autocomplete：用于控制表单的自动完成功能的开启和关闭，当属性为on时，会将用户输入过的内容记录下来，再次输入时显示在下拉菜单中
            </li>
            <li>
                novalidate：该属性规定当提交表单时不对其进行验证
            </li>
        </ul>
        <h1>input元素及属性</h1>
        <p>用于定义文本输入框，密码输入框，单选钮，复选钮，提交按钮，重置按钮等</p>
        <p>接下来做一个演示：</p>
        <form action="" method="post" name="测试表单">
            <label>
                文字输入框：<input type="text" name="测试输入框" placeholder="请输入文字" size="120px" ><br>
                密码输入框：<input type="password"><br>
                <p>
                    单选钮：<input type="radio" name="sex">
                    <input type="radio" name="sex">
                    <p>单选钮通过设定相同的姓名达到单选的效果</p>
                </p>
                <p>
                    复选框：<input type="checkbox"> <input type="checkbox"> <input type="checkbox">
                </p>
                普通按钮：<input type="button" name="按钮" value="按钮"><br>
                提交按钮：<input type="submit"><br>
                重置按钮：<input type="reset"><br>
                文件域：<input type="file"><br>
                搜索域：<input type="search">
            </label>
        </form>
        <form action="#" id="form1">
            <p>接下来测试一些input元素的属性值</p>
            <label>
                <p>name属性用来定义input标签的姓名</p>
                <input type="text" name="input1">
                <p>value属性用来定义input标签的默认值，即一开始就出现在输入框中的文字内容</p>
                <input type="text" value="默认文字">
                <p>size属性用来定义输入框的宽度</p>
                <input type="text" size="50px">
                <p>readonly属性用来定义输入框内的文字只读不能修改</p>
                <input type="text" readonly value="文字只读不能修改">
                <p>disabled属性定义input标签第一次加载时禁用该控件(灰色)</p>
                <input type="text" disabled>
                <p>checked属性用于定义控件默认被选中的项</p>
                <input type="radio" checked name="radio">设置默认选中的单选按钮 <input type="radio" name="radio">没有设置默认选中的单选按钮
                <p>maxlength属性用于定义输入的最多字符数</p>
                <input type="text" maxlength="3" placeholder="这个输入框最多只能输入三个字符" size="50px">
                <p>autocomplete属性用来设置是否自动完成表单填充内容,即以下拉列表的方式出现曾经输入过的内容</p>
                <input type="email" autocomplete="on">
                <p>autofocus属性设定是否自动获取焦点,即自动定位到设定此属性的input元素上</p>
                <input type="text" autofocus>
                <p>form属性设定字段隶属于那个form.值比如是form标签的id值</p>
                <input type="text" form="form1">
                <p>placeholder属性用于定义输入框的提示信息</p>
                <input type="text" placeholder="输入框的提示消息">
                <p>required属性用于定义输入框为必填项,如果不填此字段，则无法使用提交按钮提交</p>
                <input type="password" required>
            </label>
        </form>
    </aside>
</article>
</body>
</html>